<template>
  <div class="common-form-modal-component">
    <a-modal
      :open="open"
      :title="title"
      :ok-text="$t('common.submit')"
      :cancel-text="$t('common.cancel')"
      @ok="handleSubmit"
      @cancel="updateOpen(false)"
      :confirm-loading="loading"
    >
      <a-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-item :label="$t('setting.groupName')" name="name">
          <a-input v-model:value="form.name" :placeholder="$t('setting.groupNamePlaceholder')" />
        </a-form-item>
        <a-form-item :label="$t('setting.groupCode')" name="code">
          <a-input v-model:value="form.code" :placeholder="$t('setting.groupCodePlaceholder')" />
        </a-form-item>
        <a-form-item :label="$t('setting.groupIcon')" name="icon">
          <a-select v-model:value="form.icon" :placeholder="$t('setting.groupIconPlaceholder')">
            <a-select-option value="setting">{{ $t('setting.iconSetting') }}</a-select-option>
            <a-select-option value="system">{{ $t('setting.iconSystem') }}</a-select-option>
            <a-select-option value="mail">{{ $t('setting.iconMail') }}</a-select-option>
            <a-select-option value="file">{{ $t('setting.iconFile') }}</a-select-option>
            <a-select-option value="security">{{ $t('setting.iconSecurity') }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('setting.groupSort')" name="sort">
          <a-input-number v-model:value="form.sort" :min="0" style="width: 100%" />
        </a-form-item>
        <a-form-item :label="$t('common.remark')" name="remark">
          <a-textarea v-model:value="form.remark" :placeholder="$t('common.remarkPlaceholder')" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { CreateConfigGroup } from '@/types/api/config/configGroup'
import { useGroupFormRules } from '../config/formRules'

defineOptions({
  name: 'GroupFormModal'
})

const { t } = useI18n() 

// 类型定义
type FormMode = 'add' | 'edit'

// Props定义
const props = withDefaults(defineProps<{
  open: boolean
  form: CreateConfigGroup & { id?: string }
  mode: FormMode
  loading: boolean
}>(), {
  open: false,
  mode: 'add',
  loading: false
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'submit'): void
}>()

// 表单实例
const formRef = ref<FormInstance>()

// 更新open状态
const updateOpen = (value: boolean) => {
  emit('update:open', value)
}

// 弹窗标题
const title = computed(() => props.mode === 'add' ? t('setting.addGroup') : t('setting.editGroup'))

// 表单验证规则
const formRules = useGroupFormRules()

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    emit('submit')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 监听弹窗关闭
watch(() => props.open, (val) => {
  if (!val) {
    formRef.value?.resetFields()
  }
})

// 导出表单实例
defineExpose({
  formRef
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 